<template>
	<view class="Clueentry-box">
		<view class="Clueentry-top">
			<u-navbar :border-bottom="false" height="60" title="线索录入" :background="background" title-color="#FEFFFE" back-icon-color="#fff"></u-navbar>
		</view>
		<view class="Clueentry-auto">
			<view class="basicinformation">
				<u-section title="基本信息" color="#333333" line-color="#91C853" font-size="30" :bold="true" :right="false"></u-section>
			</view>
			<view class="Studentinformation">
				<u-form :model="form" ref="uForm">
					<u-form-item label="学员姓名：" label-width="150" :required="required" prop="Studentname"><u-input v-model="form.Studentname" :border="border" placeholder="请输入学生的姓名"/></u-form-item>
					<u-form-item label="性别：" label-width="150">
						<u-radio-group v-model="Gendertb">
							<u-radio v-for="(item, index) in rules.Gender" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="微信：" label-width="150"><u-input v-model="form.WeChat" :border="border" placeholder="请输入学生的微信"/></u-form-item>
					<u-form-item label="联系电话：" label-width="150" :required="required" prop="contactnumber"><u-input v-model="form.contactnumber" :border="border" placeholder="请输入学生的电话"/></u-form-item>
					<u-form-item label="所在地：" label-width="150" :required="required"  prop="region">
						<u-input v-model="form.region" :border="border" :select-open="pickerShow" type="select" placeholder="请选择地区" @click="pickerShow = true"/>
					</u-form-item>
					<u-form-item label="意向专业：" label-width="150" :required="required"  prop="goodsType">
						<u-input v-model="form.goodsType"  :border="border" :select-open="selectShow" type="select" placeholder="请选择专业课程" @click="selectShow = true"/>
					</u-form-item>
					<u-form-item label="是否咨询过其他机构：" label-width="300">
						<u-radio-group v-model="Consultationtb">
							<u-radio v-for="(item, index) in rules.Consultation" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="线索来源：" label-width="150" :required="required"  prop="Sourcesofclues"><u-input v-model="form.Sourcesofclues" :select-open="selectShow1" :border="border" type="select" placeholder="请选择线索来源" @click="selectShow1 = true"/></u-form-item>
					<u-form-item label="当前情况：" label-width="150">
						<u-radio-group v-model="Currentsituationtb">
							<u-radio v-for="(item, index) in rules.Currentsituation" :key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<view class="teenagerscl" v-if="Currentsituationtb == '青少年'">
						<u-form-item label="年龄：" label-width="150"><u-input v-model="form.Age" :border="border" placeholder="请输入学生年龄"/></u-form-item>
						<u-form-item label="在读年级：" label-width="150"><u-input v-model="form.Ingrade" :border="border" placeholder="请输入在读年级"/></u-form-item>
					</view>
				</u-form>
				<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
				<u-select mode="mutil-column-auto" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
				<u-select mode="mutil-column-auto" :list="selectList1" v-model="selectShow1" @confirm="selectConfirm1"></u-select>
			</view>
		</view>
		<view class="Clueentry-bottom">
			<view class="Clueentry-bottom-remarksxmyp">
				<view class="Clueentry-bottom-remarks">
					<view class="remarks">
						<u-section title="备注" color="#333333" line-color="#91C853" font-size="30" :bold="true" :right="false"></u-section>
						<u-input type="textarea" placeholder="请输入该条线索的备注内容" v-model="form.remarks" />
					</view>
				</view>
				<view class="Clueentry-bottom-target">
					<view class="target">
						<u-section title="学习目标" color="#333333" line-color="#91C853" font-size="30" :bold="true" :right="false"></u-section>
						<u-input type="textarea" placeholder="请输入该学员的学习目标" v-model="form.target" />
					</view>
				</view>
				<view class="Clueentry-bottom-Concerns">
					<view class="Concerns">
						<u-section title="关心问题" color="#333333" line-color="#91C853" font-size="30" :bold="true" :right="false"></u-section>
						<u-input type="textarea" placeholder="请输入该学员关心的问题" v-model="form.Concerns" />
					</view>
				</view>
			</view>
			<view class="Clueentry-bottom-Tips">
				<view class="Clueentry-bottom-Tips1">标 <view class="red">*</view> 号为必填项。</view>
				其他信息未补全时该条线索不予匹配机构，直接回到线索 列表，超过可补全的时间则归为总端所有。
			</view>
			<view class="Clueentry-bottom-Submit">
				<view class="success" @click="submit">匹配机构</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					remarks: '',
					target: '',
					Concerns: '',
					Studentname: '',
					contactnumber: '',
					sex: '',
					region: '',
					goodsType: '',
					Sourcesofclues: '',
				},
				selectList1: [
					{
						value: '朋友圈',
						label: '朋友圈'
					},
					{
						value: '电话呼入',
						label: '电话呼入'
					},
					{
						value: '电销系统',
						label: '电销系统'
					},
					{
						value: '知乎',
						label: '知乎'
					},
					{
						value: '抖音',
						label: '抖音'
					},
					{
						value: '朋友介绍',
						label: '朋友介绍'
					}
				],
				selectList: [
					{
						value: 1,
						label: '语言培训',
						children: [
							{
								value: 2,
								label: '成人英语',
								children: [
									{
										value: 3,
										label: '新概念英语'
									},
									{
										value: 4,
										label: '零基础英语'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [
									{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '设计培训',
						children: [
							{
								value: 9,
								label: '网页设计',
								children: [
									{
										value: 10,
										label: 'DW'
									}
								]
							}
						]
					}
				],
				rules: {
					Studentname: [
						{ 
							required: true, 
							message: '请输入学生的姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					contactnumber: [
						{
							required: true, 
							message: '请输入学生的电话',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					region: [
						{
							required: true,
							message: '请选择地区',
							trigger: 'change',
						}
					],
					Sourcesofclues:[
						{
							required: true,
							message: '请选择专业课程',
							trigger: 'change',
						}
					],
					goodsType: [
						{
							required: true,
							message: '请选择线索来源',
							trigger: 'change',
						}
					],
					Gender: [
						{
							name: '男',
							disabled: false
						},
						{
							name: '女',
							disabled: false
						}
					],
					Consultation: [
						{
							name: '是',
							disabled: false
						},
						{
							name: '否',
							disabled: false
						}
					],
					Currentsituation: [
						{
							name: '成年人',
							disabled: false
						},
						{
							name: '青少年',
							disabled: false
						}
					]
				},
				Gendertb: '',
				pickerShow: false,
				selectShow: false,
				selectShow1: false,
				Consultationtb: '',
				Currentsituationtb: '',
				radio: '',
				border: true,
				required: true,
				switchVal: false,
				background: {
					backgroundColor: '#92C15E',
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						uni.navigateTo({
							url: '/pages/market/Cluemanagement/Distributenow'
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选择地区回调
			regionConfirm(e) {
				this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.form.goodsType = '';
				e.map((val, index) => {
					this.form.goodsType += this.form.goodsType == '' ? val.label : '-' + val.label;
				})
			},
			// 选择商品类型回调
			selectConfirm1(e) {
				this.form.Sourcesofclues = '';
				e.map((val, index) => {
					this.form.Sourcesofclues += this.form.Sourcesofclues == '' ? val.label : '-' + val.label;
				})
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.Clueentry-box /deep/ .uni-textarea-textarea{
		font-size: 28upx;
		color: #333333;
	}
	.Clueentry-box /deep/ .uni-textarea-placeholder{
		font-size: 28upx;
	}
	.Clueentry-box /deep/ .u-input__textarea{
		padding: 0;
		padding-top: 25upx;
	}
	.Clueentry-box /deep/ .u-form-item--left__content__label{
		width: 100%;
		color: #333;
		display: flow-root;
		text-align: justify;
		text-align-last: justify;
	}
	.Clueentry-box /deep/ .u-border-bottom:after{
		border-bottom-width: 0;
	}
	.Clueentry-box /deep/ .u-radio:nth-last-child(1){
		margin-left: 45upx;
	}
	.Clueentry-box /deep/ .u-radio__label{
		color: #999999;
	}
	.Clueentry-box{}
	.Clueentry-top{
		padding: 30upx;
		height: 320upx;
		padding-top: 0;
		padding-bottom: 40upx;
		background-color: #92C15E;
	}
	.Clueentry-auto{
		margin: 30upx;
		margin-top: -210upx;
		background: #FFFFFF;
		padding: 40upx 30upx;
		box-shadow: 0px 0px 32px 0px rgba(153, 153, 153, 0.3);
		border-radius: 10upx;
	}
	.Studentinformation{
		margin-top: 20upx;
		padding-left: 20upx;
	}
	.Clueentry-bottom-remarks,.Clueentry-bottom-target,.Clueentry-bottom-Concerns{
		margin: 30upx;
		padding-left: 20upx;
		background: #FFFFFF;
		padding: 40upx 30upx;
		box-shadow: 0px 0px 32px 0px rgba(153, 153, 153, 0.3);
		border-radius: 10upx;
	}
	.Clueentry-bottom{}
	.Clueentry-bottom-Tips{
		margin: 50upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		line-height: 38upx;
		text-align: justify;
	}
	.Clueentry-bottom-Tips1{
		display: flex;
	}
	.Clueentry-bottom-Submit{
		margin: 30upx;
		padding-bottom: 60upx;
	}
	.success{
		color: #fff;
		border-radius: 10upx;
		text-align: center;
		padding: 25upx;
		margin-top: 80upx;
		border: 1px solid #91C853;
		background-color: #91C853;
	}
	.red{
		color: #E60012;
		padding: 0 10upx;
	}
</style>
